<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
<form method="get" action="login3.html">
    <p>
        用户名:<input id="imn" name="name" type="text" onblur="adds()"/>
    </p>
    <p id="nameDiv"></p>

    <div id="objectDiv"></div>

    <ul id="arrayUl"></ul>

    <select id="arraySel"></select>

    <div id="objectArrayDiv"></div>

</form>
</body>
<script type="text/javascript">
    function adds(){
        $.ajax({
            "url" : "userServlet?name="+$("#imn").val(),
            "type" : "GET",
            "deta" : "name="+name,
            "dataType" : "text",
            "success" : function (data){
                if(data == "true") {
                    $("#nameDiv").html("用户名已被使用！");   // nameDiv为显示消息的div 的id
                } else {
                    $("#nameDiv").html("用户名可以使用！")
                }
            },
            "error" : function (){
                alert("用户名验证时出现错误!")
            }
        });
        // 响应成功时的回调函数
        function callBack(data){
            if(data == "true") {
                $("#nameDiv").html("用户名已被使用！");   // nameDiv为显示消息的div 的id
            } else {
                $("#nameDiv").html("用户名可以使用！")
            }
        }
    }

    var user = {
        "id" : 1,
        "name" : "张三",
        "pwd" : "000"
    };

    // 1.定义JSON 格式的user 对象，并在div 中输出
    $("#objectDiv").append("ID:" + user.id + "<br/>")      // java  user.getId();
        .append("用户名:"+ user.name + "<br/>")
        .append("密码:" + user.pwd + "<br/>");

    // 2.定义JSON 格式的字符串数组，并在ul 和 select  中输出
    var ary = [ "中", "美", "俄"];
    for (let i = 0; i < ary.length; i++) {
        $("#arrayUl").append("<li>" + ary[i] + "</li>");
        $("#arraySel").append("<option value='"+ ary[i] + "'>" + ary[i] + "</option>");
    }

    // 3.定义JSON 格式 的user 对象数组，并使用<table> 输出
    var userArray = [{
        "id" : 2,
        "name" : "admin",
        "pwd" : "123"
    }, {
        "id" : 3,
        "name" : "詹姆斯",
        "pwd" : "11111"
    }, {
        "id" : 4,
        "name" : "梅西",
        "pwd" : "6666"
    } ];
    // 展示数据的 table 元素

    var $table = $("<table border ='1'></table>");
    $table.append("<tr>" +
                    "<td>ID</td>" +
                    "<td>用户名</td>" +
                    "<td>密码</td>" +
                  "</tr>");
    $(userArray).each(function () {
        $table.append("<tr>" +
              "<td>"+ this.id + "</td>"
            + "<td>" + this.name + "</td>"
            + "<td>" + this.pwd + "</td>");
    } );
    $("#objectArrayDiv").append($table);
</script>
</html>